import React, { Component } from 'react';
import styles from './Elements.css'; 

// import {globalQuery,globalPostQuery} from '../../services/global';
// import {getList_url,queryAlarm_url,setAlarm_url} from '../../services/ip';
 
 

const formItemLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span:16 },
  };

//气象要素
class Elements extends Component {
  constructor(props){
    super(props);
    this.formRef = React.createRef();
    this.state={ 
        data:[
            {code:"",text:"气温",icon:require("../../../assets/main/wd.png"),iconHover:require("../../../assets/main/wd_h.png")},
            {code:"",text:"降水",icon:require("../../../assets/main/js.png"),iconHover:require("../../../assets/main/js_h.png")},
            {code:"",text:"湿度",icon:require("../../../assets/main/sd.png"),iconHover:require("../../../assets/main/sd_h.png")},
            {code:"",text:"风",icon:require("../../../assets/main/f.png"),iconHover:require("../../../assets/main/f_h.png")},
            {code:"",text:"紫外线",icon:require("../../../assets/main/zwx.png"),iconHover:require("../../../assets/main/zwx_h.png")},
            {code:"",text:"能见度",icon:require("../../../assets/main/njd.png"),iconHover:require("../../../assets/main/njd_h.png")},
            {code:"",text:"气压",icon:require("../../../assets/main/qy.png"),iconHover:require("../../../assets/main/qy_h.png")},
        ],
        index:0
    }
  } 
  //要素点击事件
   liClick = (key)=>{
       this.setState({
            index:key
       }) 
   }

  componentDidMount(){
      
  } 
  render() { 
    const {data,index} = this.state;
    let html = data.map((item,key)=>{
        return <li key={key} onClick={this.liClick.bind(this,key)} className={index==key?styles.active:null}>
                    <img src={item.icon} className={styles.img1}/>
                    <img src={item.iconHover} className={styles.img2}/>
                    <span className={styles.text}>{item.text}</span>
                </li>
    }) 
    return (
      <div className={styles.centerBox}>
           <ul>
               {html}
           </ul>
      </div>
    );
  }
}

export default Elements;
